Push Subscription
This recipe shows how to use push notifications with subscription management.
Difficulty
Advanced
Use Case
Allowing users to subscribe to features of your app allows you to keep in touch with and convert visitors!
Init State
After service worker is registered, client is checking if it is already subscribed to the notificiation service. Button’s contents is set depending on this.
Subscribe
After successful subscription (index.js::pushManager.subscribe) client sends a post request to application server to register the subscription
Notifications
Server periodically sends a notification using web-push library to all registered endpoints. If an endpoint is not registered anymore (expired or cancelled) it is removed from subscription list.
Unsubscribe
After successful unsubscription (index.js::pushSubscription.unsubscribe) client sends a post request to application server to unregister the subscription. Server is no longer sending notification.
Subscription Expired
Service worker is watching for the pushsubscriptionchange event and resubscribes to the push service.
Not in Recipe
Subscription might be cancelled by the user outside of this page (from browser settings or notification UI). In this recipe server will stop to send the notifications, but the front-end doesn’t know about it. One could periodically check if registration is still active.
Category
Web Push
Has it been useful?
Tell us what you think of this recipe by leaving a comment!